*{
    margin: 0;
    padding: 0;
}
/*主题色*/
@themeColor: #e92322;

/*头部开始*/
.wjs-header{
    height: 50px;
    border-bottom: 1px solid #ccc;
    text-align: center;
    .row{
        height: 100%;
        //  > 代表直接子元素
        > div:nth-of-type(-n+3){
            height: 100%;
            line-height: 50px;
            border-right: 1px solid #ccc;
        }
        > div:first-of-type{
            position: relative;
            &:hover{
                > img{
                    display: block;
                }
            }
            > img{
                position: absolute;
                top:49px;
                left:50%;
                transform: translateX(-50%);
                border: 1px solid #ccc;
                border-top: none;
                display: none;
                z-index: 100;
            }
        }
         > div:last-of-type{
            height: 100%;
            line-height: 50px;
            > .btn-danger{
                background-color: @themeColor;
                border-color: @themeColor;
            }

            > .btn{
                padding: 3px 15px;
            }
            > .btn-link{
                color:#000;
                &:hover{
                    text-decoration: none;
                }
            }
        }
    }
}
/*头部结束*/
/*导航开始*/
.wjs-nav{
   
    .navbar-toggle{
        margin-top: 23px;
    }
    .navbar-brand{
        height: 80px;
        line-height: 50px;
        font-size: 40px;
        > span:first-of-type{
            color:@themeColor;
        }
        >span:last-of-type{
            color: #000000;
        }
    }
    .navbar-nav{
       height: 100%;
        > li {
            height:80px;
            > a{
                display: block;
                height: 100%;
                line-height: 50px;
                font-size: 16px;
                &:hover,&:focus{
                    border-bottom: 3px solid @themeColor;
                }
            }
        }
        > .active{
            > a,a:hover,a:focus{
                background-color:transparent ;
                border-bottom: 3px solid @themeColor;
            }
        }
    }
}
/*导航结束*/
/*轮播图开始*/
.wjs-swippe{
    .pcImg{
        display: block;
        width: 100%;
        height: 410px;
        background-position: center center;
        background-size: cover;
      }
      .phoneImg{
        display: block;
        width: 100%;
      }
      .phoneImg > img{
        display: block;
        width:100%;
      }
}
/*轮播图结束*/
/*交易信息开始*/
.wjs-info{
    padding: 20px 0;
    .row{
        > div {
            margin-top: 20px;
            a {
                .media{
                    .wjs_icon{
                        font-size: 30px;
                    }
                }
                &:hover{
                    color: @themeColor;
                }
            }
            
        }
    }
}
/*交易信息结束*/
/*预约开始*/
.wjs-order{
    height: 60px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    
    .row{
        div{
            a{
                line-height: 60px;
            }
            .wjs_icon{
                font-size: 20px;
            }
            a:hover{
                color: @themeColor;
            }
            .order-now{
                color: @themeColor;
                border-bottom: 1px dashed @themeColor;
            }
        }
    }
}
/*预约结束*/
/*推荐开始*/
.wjs-recommend{
    clear: both;
    padding: 20px;
    background-color: #eee;
    .nav-tabs{
        > li{
            margin-bottom: 0px;
            >a {
                border: none;
                border-radius: 0px;
                padding: 20px;
                &:hover{
                    border-bottom: 3px solid @themeColor;
                }
            }
            &.active{
                > a,a:hover,a:focus{
                    border: none;
                    background-color: transparent;
                    border-bottom: 3px solid @themeColor;
                }
            }
        }
    }
    /*产品模块*/
    .wjs-box{
        position: relative;
        height: 150px;
        background-color: #fff;
        margin-top: 20px;
        > .wjs-left{
            margin-right: 100px;
            .wjs-title{
                text-align: center;
                padding-top: 10px;
            }
            .row{
                margin: 0px -10px;
                > div{
                    p{
                        font-size: 12px;
                    }
                }
                > div:nth-of-type(even){
                    text-align: right;
                }
            }
        }
        >.wjs-right{
            width: 100px;
            height: 100%;
            // background-color: blue;
            position: absolute;
            top: 0;
            right: 0;
            border-left: 1px dashed #ccc;
            text-align: center;
            padding-top: 30px;
            > .wjs-tips{
                width: 100%;
                position: absolute;
                top: 20px;
                left: 50%;
                transform: translateX(-50%);
                span{
                    cursor: pointer;
                }
                span:first-of-type{
                    color: red;
                    border: 1px solid red;
                }
                span:last-of-type{
                    color: green;
                    border: 1px solid green;
                }
            }
            >b{
                font-size: 40px;
                color: @themeColor;
            }
            >sub{
                color: @themeColor;
                bottom: 0;
            }
            &::before,&::after{
                content: "";
                width: 10px;
                height: 10px;
                background-color: #eee;
                border-radius: 50%;
                position: absolute;
                left: -5px;
            }
            &::before{
                top: -5px;
                box-shadow: 0px -1px 1px #ccc inset;
            }
            &::after{
                bottom: -5px;
                box-shadow: 0px 1px 1px #ccc inset;
            }
        }
         // 选中状态
        &.active{
            position: relative;
            background-color: @themeColor;
            > .wjs-right{
                > sub,b,p{
                    color: #fff;
                }
            }
            > .wjs-left{
                color: #fff;
            }

            &::before{
                content: "\e915";
                font-family: "wjs";
                font-size: 20px;
                position: absolute;
                top: -4px;
                left: 0;
                color: #fff;
            }
        }
    }
}
/*推荐结束*/
/*新闻样式开始*/
.wjs-news{
    padding-top: 20px;
    .wjs-news-titile{
        border-bottom: 1px solid #ccc;
        line-height: 60px;
        text-align: center;
        position: relative;
        &::before{
            content: "";
            width: 8px;
            height: 8px;
            border-radius: 50%;
            border: 1px solid #ccc;
            position: absolute;
            right: -8px;
            bottom: -4px;
        }
    }
    .wjs-line{
        width: 1px;
        height: 100%;
        border-left: 1px dashed @themeColor;
        position: absolute;
        left: 45px;
        right: 0;
    }
    // 标签页导航
    .nav-tabs{
        border-bottom: none;
        position: relative;
        // &::before{
        //     content: "";
        //     width: 1px;
        //     height: 100%;
        //     border: 1px dashed @themeColor;
        //     position: absolute;
        //     left: 30px;
        //     right: 0;
        // }
        > li {
            margin-bottom: 60px;
            > a{
                width: 60px;
                height: 60px;
                border-radius: 50%;
                background-color: #eee;
                border: none;
                .wjs_icon{
                    font-size: 30px;
                    color: #fff;
                }
            }
            > a:hover{
                background-color: @themeColor;
            }

            &.active{
                > a,a:hover,a:focus{
                    border: none;
                    background-color: @themeColor;
                }
            }
            &:last-of-type{
                margin-bottom: 0;
            }
        }

        @media screen and (min-width:768px) and (max-width:992px){
            > li{
                margin: 20px 30px;
            }
        }
        @media screen and (max-width:768px) {
            > li{
                width: 25%;
                margin: 20px 0px;
            }
        }
    }

    
    .wjs_news_list{
       list-style: none;
       li{
           line-height: 60px;
       }
    }
    
}
/*新闻样式结束*/
/*合作伙伴开始*/
.wjs-partener{
    padding-top: 20px;
    background-color: #eee;
    text-align: center;
    h3{
        text-align: center;
    }
    ul{
        list-style: none;
        display: inline-block;
        li{
            float: left;
            .wjs_icon{
                font-size: 80px;
            }
            margin-left: 20px;
        }
    }
}
/*合作伙伴结束*/
